import React from 'react';
import { Radio, Modal, List, Button, NavBar, Icon, WingBlank, WhiteSpace } from 'antd-mobile';
import './subOrder.css'
// import axios from 'axios'

// const PlaceHolder = ({ className = '', ...restProps }) => (
//     <div className={`${className} placeholder`} {...restProps}>Block</div>
// );

const RadioItem = Radio.RadioItem;
class subOrder extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            modal1: false,
            modal2: false,
            value: 0,
            addData: [],
            site: '请选择收货地址',
            add: '',
            name: '',
            phone: ''
        }
    }
    componentDidMount() {
        this.addRess()
    }
    addRess = () => {
        console.log(528)
        this.axios({
            url: 'api1/olife/prder/dizhi',
            method: 'get',
            params: {
                user_id: '1'
            }
        }).then(data => {
            console.log(data)
            if (data.data.code === 200) {
                this.setState({
                    addData: data.data.data
                })
            }
        })
    }
    onChange = (value) => {
        console.log('checkbox');
        this.setState({
            label: value,
        });
    };
    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }
    onClose = key => () => {
        let { add, name, phone } = this.state
        this.setState({
            [key]: false,
            site: add
        });
    }

    WingBlankExample = () => (
        <div style={{ padding: '15px 0' }}>
            <WingBlank className='subtop'>
                <div onClick={this.showModal('modal2')}>{this.state.site}</div>
                <div><span>立即送出</span><span>大约18:00送达</span></div>
            </WingBlank>

            <WhiteSpace size="lg" />
            <WingBlank className='center'>
                <div>
                    <span>肯德基宅急送(基泰卢店)</span>
                    <span>商家自配</span>
                </div>
                <div>
                    <div className='item clear'>
                        <div><img src="./img/u=3826304356,3195283210&fm=26&gp=0.jpg" alt="" /></div>
                        <div>
                            <span>香辣鸡翅</span>&nbsp;&nbsp;&nbsp;
                            <span>×2 份</span>
                        </div>
                        <div>￥12</div>
                    </div>
                    <div className='item clear'>
                        <div><img src="" alt="" /></div>
                        <div>
                            <span>香辣鸡翅</span>&nbsp;&nbsp;&nbsp;
                            <span>×2 份</span>
                        </div>
                        <div>￥12</div>
                    </div>
                    <div className='give'>
                        <span>配送费</span>
                        <span>￥9</span>
                    </div>
                    <div className='less clear'>
                        <span>满</span>
                        <span>满减优惠</span>
                        <span>-￥5</span>
                    </div>
                    <div className='less clear'>
                        <span>vip</span>
                        <span>会员折扣</span>
                        <span>-￥5</span>
                    </div>
                    <div className='rule'>
                        <span>优惠规则 ＞</span>
                        <span>小计 ￥25</span>
                    </div>
                </div>
            </WingBlank>

            <div className='sub'>
                <span>￥25</span>
                <span onClick={() => this.mysubmit()}>提交订单</span>
            </div>

        </div>
    );
    mysubmit = () => {
        if (this.state.addData.length = 0) {
            alert('请先填写地址')
        } else {
            this.props.history.push('/Home/PayOrder')
        }
    }
    xiugai(num) {
        this.setState({
            add: num.receipt_address,
            name: num.receipt_people,
            phone: num.receipt_phone
        })
    }
    render() {
        // console.log(this.state.addData[]);
        // const { label, extra } = this.state;
        if (this.state.addData.length === 0) {
            this.state.label = '请选择收货地址 ＞'
        }
        // const data = [
        //     { value: 0, label: '怡和新城F4区-26栋', extra: '钟离 12345678912' },
        //     // { value: 1, label: '交通银行储蓄卡' },
        //     // { value: 2, label: '微信支付' },
        //     // { value: 3, label: '支付宝支付' },
        // ];
        if (this.state.addData.length > 0) {
            return (
                <div>
                    <NavBar
                        style={{ backgroundColor: 'orange', color: 'white' }}
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => console.log('onLeftClick')}
                    >提交订单</NavBar>
                    {this.WingBlankExample()}
                    <WhiteSpace />
                    <Modal
                        popup
                        visible={this.state.modal2}
                        onClose={this.onClose('modal2')}
                        animationType="slide-up"
                    // afterClose={() => { alert('afterClose'); }}
                    >
                        <List renderHeader={() => <div>请选择收货地址</div>} className="popup-list">
                            {/* {data.map(i => (
                                <RadioItem key={i.value} checked={label, extra === i.label} onChange={() => this.onChange(i.label)}>
                                    {i.label}<List.Item.Brief>{i.extra}</List.Item.Brief>
                                </RadioItem>
                            ))} */}
                            <RadioItem
                                onChange={() => this.xiugai(this.state.addData[0])}
                            >
                                <div>{this.state.addData[0].receipt_address}</div>
                                <div>{this.state.addData[0].receipt_people} {this.state.addData[0].receipt_phone}</div>
                            </RadioItem>
                            <List.Item>
                                <Button type="primary" onClick={this.onClose('modal2')}>选好了</Button>
                            </List.Item>
                        </List>
                    </Modal>
                </div>
            );
        } else {
            return (<div>加载中</div>)
        }

    }
}

export default subOrder;